 <template>
  <div class="e-wrap">
    <div class="position-panel">
      <div class="e-item">
        <span class="title">广告名称</span>
        <div class="dis-block">
            <w-input :holder="`请填写`" v-model="addParams.adTitle"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">广告位置</span>
        <div class="dis-block">
            <w-select :options='adsList' v-model="addParams.adApId"></w-select>
        </div>
      </div>
      <div class="e-item">
        <span class="title">开始时间</span>
        <div class="dis-block">
          <!-- <w-input :holder="`请填写`" v-model="addParams.adBeginTime"></w-input> -->
          <w-date-picker language="ch" placeholder="开始时间" v-model="addParams.adBeginTime"></w-date-picker>
        </div>
      </div>
      <div class="e-item">
        <span class="title">结束时间</span>
        <div class="dis-block">
          <!-- <w-input :holder="`请填写`" v-model="addParams.adEndTime"></w-input> -->
          <w-date-picker language="ch" placeholder="结束时间" v-model="addParams.adEndTime"></w-date-picker>
        </div>
      </div>
      <!-- <div class="e-item">
        <span class="title" style="vertical-align:top;margin-top: 10px;">广告图片</span>
        <div class="dis-block" >
          <div class='imgBox'>
            <img :src="addParams.apPath" alt="">
          </div>
          <input type="file" ref="imgInput" @change="changeImg" accept='image/*' style="display: none;">
          <button type='button' class="browse" @click="chooseImg">浏览</button>
        </div>
      </div> -->
      <upload-img :title='`广告图片`' :imgSrc='addParams.apPath' :type='`advert`' @on-img='getAdvertImg'></upload-img>
      <div class="e-item">
        <span class="title">幻灯片序号</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" v-model="addParams.adSlideSequence"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">类型</span>
        <div class="advert-type dis-block" style="vertical-align:top;">
          <span>
            <w-radio :label='`goodsInfo`' name='type' v-model='addParams.adInfo.type' @on-radio='clearValue'>商品详情</w-radio>
          </span>
          <span>
            <w-radio :label='`goodsList`' name='type' v-model='addParams.adInfo.type' @on-radio='clearValue'>商品列表</w-radio>
          </span>
          <span>
            <w-radio :label='`channel`' name='type' v-model='addParams.adInfo.type' @on-radio='clearValue'>频道</w-radio>
          </span>
          <span>
            <w-radio :label='`store`' name='type' v-model='addParams.adInfo.type' @on-radio='clearValue'>店铺</w-radio>
          </span>
          <span>
            <w-radio :label='`link`'  name='type' v-model='addParams.adInfo.type' @on-radio='clearValue'>链接地址</w-radio>
          </span>
          <w-radio :label='`keyword`' name='type' v-model='addParams.adInfo.type' @on-radio='clearValue'>关键字搜索</w-radio>
          <w-radio :label='`storeSearch`' name='type' v-model='addParams.adInfo.type' @on-radio='clearValue'>店铺关键字搜索</w-radio>
        </div>
      </div>
      <div class="e-item" v-if='isShow'>
        <span class="title">{{typeText}}</span>
        <div class="dis-block">
            <w-select :defaultSe='false' :options='channelList' v-if='addParams.adInfo.type == "channel"' v-model="addParams.adInfo.value"></w-select>
            <w-select :defaultSe='false' :options='storeList' v-if='addParams.adInfo.type == "store"' v-model="addParams.adInfo.value"></w-select>
            <!-- <w-select v-if='isShow == "select"'></w-select> -->
            <w-input :holder='`请填写`' v-if='isShow == "input"' v-model="addParams.adInfo.value"></w-input>
        </div>
      </div>

      <!-- 商品详情 -->
      <goods-detail v-if='addParams.adInfo.type == "goodsInfo"' :defaultGood='defaultGood' @on-goods='getGoodsInfoId'></goods-detail>

      <!-- 商品列表 -->
      <goods-list v-if='addParams.adInfo.type == "goodsList"' :threeCode='`${$route.query.three}`' :defaultChecked='defaultChecked' @on-goods='getGoodsList'></goods-list>
      <!-- 按钮 -->
      <div class='submit-btn'>
        <w-button @on-click='submitAddOrUpdate'>提交</w-button>
        <button class="btn colse" @click.stop="$router.go(-1)">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { apiDecorateMange, apiGoodsMange, apiGoodsByIDList } from 'js/api'
import { mapGetters, mapActions } from 'vuex'
import GoodsList from './components/goodsList'
import UploadImg from '../homeDecorate/components/uploadImg'
import GoodsDetail from '../homeDecorate/components/goodsDetail'

export default {
  data() {
    return {
      typeText: '',
      isShow: 'select',
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || '',
        adTitle: '',
        adApId: '',
        adBeginTime: '',
        adEndTime: '',
        adSlideSequence: '',
        apPath: '',
        adInfo: {
          type: 'goodsInfo',
          value: ''
        }
      },
      // 查询广告信息 -- 参数
      infoParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || ''
      },
      defaultChecked: [],
      defaultGood: []
    }
  },
  components: {
    'goods-list': GoodsList,
    'upload-img': UploadImg,
    'goods-detail': GoodsDetail
  },
  updated() {
    if (this.addParams.adInfo.type == 'goodsInfo') {
      this.typeText = '商品货号'
      this.isShow = ''
    }
    if (this.addParams.adInfo.type == 'goodsList') {
      this.typeText = '商品列表'
      this.isShow = ''
    }
    if (this.addParams.adInfo.type == 'channel') {
      this.typeText = '频道'
      this.isShow = 'select'
    }
    if (this.addParams.adInfo.type == 'store') {
      this.typeText = '店铺'
      this.isShow = 'select'
    }
    if (this.addParams.adInfo.type == 'link') {
      this.typeText = '图片链接'
      this.isShow = 'input'
    }
    if (this.addParams.adInfo.type == 'keyword') {
      this.typeText = '关键字搜索'
      this.isShow = 'input'
    }
    if (this.addParams.adInfo.type == 'storeSearch') {
      this.typeText = '店铺关键字搜索'
      this.isShow = 'input'
    }
  },
  computed: {
    ...mapGetters(['token', 'adsList', 'channelList', 'storeList'])
  },
  created() {
    this.fetchAdsList({token: this.token, three: this.$route.query.three})
    this.fetchChannelList({token: this.token, three: this.$route.query.three, terminal: this.$route.query.terminal})
    this.fetchStoreList({token: this.token, three: this.$route.query.three})
    if (this.$route.query.id) {
      this.getAdvertInfo()
    }
  },
  methods: {
    ...mapActions(['fetchAdsList', 'fetchChannelList', 'fetchStoreList']),
    // 查询 广告信息
    getAdvertInfo(id) {
      this.infoParams.accessToken = this.token
      apiDecorateMange.getAdvertInfo(this.infoParams).then(data => {
        if (data.code != 200) return
        const info = data.data.advertInfo
        this.addParams.adTitle = info.adTitle
        this.addParams.adApId = info.adApId
        this.addParams.adBeginTime = info.adBeginTime
        this.addParams.adEndTime = info.adEndTime
        this.addParams.adSlideSequence = info.adSlideSequence
        this.addParams.apPath = info.adPath
        this.addParams.adInfo.type = info.adInfo ? JSON.parse(info.adInfo).type : 'goodsInfo'
        this.addParams.adInfo.value = info.adInfo ? JSON.parse(info.adInfo).value : ''
        if (this.addParams.adInfo.type == 'goodsList') {
          const par = {
            accessToken: this.token,
            threeMenuCode: this.$route.query.three,
            ids: this.addParams.adInfo.value.split(',')
          }
          apiGoodsByIDList(par).then(data => {
            if (data && data.code != 200) return
            this.defaultChecked = data.data.map(item => {
              return {
                deleted: false,
                id: item.id,
                goodsName: item.goodsName,
                goodsMainPhotoPath: item.goodsMainPhotoPath
              }
            })
          })
        }
        if (this.addParams.adInfo.type == 'goodsInfo') {
          if (this.addParams.adInfo.value) {
            const par = {
              accessToken: this.token,
              threeMenuCode: this.$route.query.three,
              id: Number(this.addParams.adInfo.value)
            }
            apiGoodsMange.apiGoodsEdit(par).then(data => {
              if (!data) return
              let obj = {id: data.data.id, goodsMainPhotoPath: data.data.goodsDraft.goodsMainPhotoPath, goodsName: data.data.goodsDraft.goodsName, deleted: false}
              this.defaultGood.push(obj)
            })
          }
        }
      })
    },
    // 获取商品详情 id
    getGoodsInfoId(data) {
      if (data.length) {
        this.addParams.adInfo.value = data[0].id
      }
    },
    getAdvertImg(src) {
      this.addParams.apPath = src
    },
    clearValue() {
      this.addParams.adInfo.value = ''
    },
    // 选中的商品id列表
    getGoodsList(data) {
      let checkedId = ''
      for (let i = 0; i < data.length; i++) {
        checkedId += ',' + data[i].id
      }
      this.addParams.adInfo.value = checkedId.substring(1)
    },
    // 提交 新增/编辑
    submitAddOrUpdate() {
      this.addParams.accessToken = this.token
      if (!this.addParams.adTitle) {
        this.$toast('请填写广告名称')
        return
      }
      if (!this.addParams.adApId) {
        this.$toast('请填写广告位置')
        return
      }
      if (!this.addParams.adInfo.value) {
        this.$toast(`请填写${this.typeText}`)
        return
      }
      this.addParams.adInfo = JSON.stringify(this.addParams.adInfo)
      apiDecorateMange.addAdvert(this.addParams).then(data => {
        if (data && data.code != 200) return
        this.$toast(`${this.$route.query.id ? '修改' : '新增'}成功`, () => {
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.position-panel {
  width: 978px;
  min-height: 800px;
  margin: 0 auto;
  .e-item {
    display: block;
    width: 475px;
    margin: 0 auto 20px !important;
    .title {
      width: 106px;
      font-size: 14px;
      margin-right: 20px;
    }
    .dis-block {
      width: 284px;
      vertical-align: middle;
    }
    .advert-type {
      width: 340px;
      display: inline-block;
      span {
        display: inline-block;
        width: 105px;
        margin-bottom: 10px;
      }
    }
    .imgBox {
      width: 54px;
      height: 54px;
      display: inline-block;
      border: 1px solid $border-gray-light;
    }
  }
}
.submit-btn {
  text-align: center;
  margin-top: 30px;
  button {
    width: 90px !important;
  }
}
.good-list {
  width: 100%;
  margin-top: 20px;
  .choose-good {
    background: $bg-gray-light;
    border: 1px solid $border-gray-light;
    height: 40px;
    & > span {
      margin-left: 20px;
      display: inline-block;
    }
    & > div {
      display: inline-block;
      margin-left: 240px;
      span {
        text-align: right;
        display: inline-block;
        width: 200px;
        margin: 4px 20px;
      }
    }
  }
  .list {
    border: 1px solid $border-gray-light;
    padding: 12px 0 0 30px;
    .good-item {
      width: 88px;
      margin-right: 30px;
      margin-bottom: 12px;
      position: relative;
      float: left;
      &:first-child {
        margin-left: 0;
      }
      .close-icon {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 14px;
        height: 14px;
      }
      .good-title {
        font-size: 12px;
        margin-top: 10px;
      }
    }
  }
}
.fr {
  width: 100%;
  margin: 20px auto;
}
</style>
